<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>奖项设置</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link
      rel="stylesheet"
      href="js/element-ui@2.4.11/lib/theme-chalk/index.css"
    />
    <script src="js/polyfill.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/element-ui@2.4.11/lib/index.js"></script>
    <script src="js/member.js"></script>
    <style>
      .el-input {
        width: 120px;
      }
      .el-table {
        margin-bottom: 10px;
      }
      * {
        cursor: initial;
      }
      .awards,
      .members {
        width: 80%;
        margin: auto;
        margin-top: 50px;
      }
      h1 {
        font-size: 30px;
        text-align: center;
        line-height: 1.5;
        margin-bottom: 20px;
      }
      h1 span {
        font-size: 16px;
      }
      a {
        text-decoration: underline;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="awards">
        <h1>奖项设置 <span>（请按抽奖顺序添加）</span></h1>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            width="180"
            v-for="(item, index) in columns"
            :key="index"
          >
            <template slot-scope="scope">
              <div>
                <div v-if="scope.row.editing[item.prop]">
                  <el-input
                    size="mini"
                    v-model="scope.row[item.prop]"
                    @blur="onSaveCell(scope.row, item.prop)"
                  ></el-input>
                </div>
                <div
                  v-else
                  @dblclick="onEditCell(scope.row, item.prop, $event)"
                >
                  {{ scope.row[item.prop] || '(请填写)' }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="onAdd(scope.row, scope.$index)"
                type="primary"
                >增加</el-button
              >
              <el-button
                size="small"
                @click="onRemove(scope.row, scope.$index)"
                type="danger"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-button
          size="small"
          type="primary"
          @click="onAdd(null, -1)"
          v-show="tableData.length===0"
          >增加</el-button
        >
        <span>每个奖项每次抽取人数：</span>
        <el-select size="small" v-model="batchNumber" @change="onChange">
          <el-option
            v-for="index in 20"
            :key="index"
            :label="index"
            :value="index"
          ></el-option>
        </el-select>
        <el-button size="small" type="danger" @click="onReset"
          >重置中奖结果</el-button
        >
        <a href="./index.html">去抽奖</a>
      </div>
      <div class="members">
        <h1>参与人员列表(共{{memberSource.length}}人)</h1>
        <el-table :data="memberSource" style="width: 100%" stripe>
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            width="180"
            v-for="(item, index) in memberColumns"
            :key="index"
          >
            <template slot-scope="scope">
              <div>
                <div v-if="scope.row.editing[item.prop]">
                  <el-input
                    size="mini"
                    v-model="scope.row[item.prop]"
                    @blur="onSaveCell(scope.row, item.prop)"
                  ></el-input>
                </div>
                <div
                  v-else
                  @dblclick="onEditCell(scope.row, item.prop, $event)"
                >
                  {{ scope.row[item.prop] || '(请填写)' }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="onRemoveMember(scope.row, scope.$index)"
                type="danger"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-button size="small" @click="onAddMember" type="primary"
          >增加</el-button
        >
        <el-button size="small" type="warning" @click="onImport">重置</el-button>
      </div>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          dialogVisible: false,
          batchNumber: 20,
          columns: [
            {
              prop: 'name',
              label: '名称',
            },
            {
              prop: 'count',
              label: '数量',
            },
            {
              prop: 'award',
              label: '奖品',
            },
          ],
          memberColumns: [
            {
              prop: 'name',
              label: '姓名',
            },
            {
              prop: 'id',
              label: '工号',
            },
          ],
          tableData: [
            {
              name: '特等奖',
              count: 1,
              editing: {},
            },
            {
              name: '一等奖',
              count: 1,
              editing: {},
            },
          ],
          memberSource: [],
        },
        computed: {
          awards: function() {
            return this.tableData
              .filter(function(item) {
                return item.name && item.count;
              })
              .map(function(item) {
                return {
                  name: item.name,
                  count: item.count,
                  award: item.award,
                };
              });
          },
          members: function() {
            return this.memberSource
              .filter(function(item) {
                return item.name && item.id;
              })
              .map(function(item) {
                return {
                  name: item.name,
                  id: item.id,
                };
              });
          },
        },
        methods: {
          onReset: function() {
            var vm = this;
            this.$confirm(
              '重置会清空所有抽奖结果，无法撤销！',
              '确定要重置吗？',
              {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
              }
            ).then(function() {
              localStorage.removeItem('players');
              localStorage.removeItem('result');
            });
          },
          onChange: function(value) {
            console.log(value);
            localStorage.setItem('batchNumber', value);
          },
          onSaveCell: function(row, key) {
            this.$set(row.editing, key, false);
            this.saveData();
          },
          onEditCell: function(row, key, e) {
            this.$set(row.editing, key, true);
            const parent = e.target.parentNode;
            this.$nextTick(function() {
              // console.log(parent.innerHTML, row)
              parent.querySelector('input').focus();
            });
          },
          onAdd: function(row, index) {
            console.log(row, index);
            this.tableData.splice(index + 1, 0, {
              editing: {
                name: true,
              },
            });
          },
          onRemove: function(row, index) {
            this.tableData.splice(index, 1);
            this.saveData();
          },
          onAddMember: function() {
            this.memberSource.push({
              editing: {
                name: true,
              },
            });
          },
          onRemoveMember: function(row, index) {
            var vm = this;
            this.$confirm('删除不可撤销！可重新添加', '确定删除吗？', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(function() {
              vm.memberSource.splice(index, 1);
              vm.saveData();
            });
          },
          onImport: function() {
            var vm = this;
            this.$confirm('重新导入会覆盖现有人员列表', '确定重置吗？', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(function() {
              vm.memberSource = window.members.map(function(item) {
                return {
                  name: item.name,
                  id: item.id,
                  editing: {},
                };
              });
              vm.saveData();
            });
          },
          saveData: function() {
            localStorage.setItem('awards', JSON.stringify(this.awards));
            localStorage.setItem('members', JSON.stringify(this.members));
            localStorage.setItem(
              'batchNumber',
              JSON.stringify(this.batchNumber)
            );
          },
        },
        created: function() {
          var awards = JSON.parse(localStorage.getItem('awards')) || [
          {
            name: '二等奖',
            award: '办公室一日游',
            count: 25,
          }, 
          {
              name: '一等奖',
              award: 'BMW X5',
              count: 10,
            },
            {
              name: '特等奖',
              award: '深圳湾一号',
              count: 1,
            },
          ];
          var members =
            JSON.parse(localStorage.getItem('members')) || window.members;
          this.batchNumber = +localStorage.getItem('batchNumber') || 20;
          this.tableData = awards.map(function(item) {
            return {
              name: item.name,
              count: item.count,
              award: item.award,
              editing: {},
            };
          });
          this.memberSource = members.map(function(item) {
            return {
              name: item.name,
              id: item.id,
              editing: {},
            };
          });
          this.saveData();
        },
      });
    </script>
  </body>
</html>
